<template>
  <view class="user">

    <view class="user-main" @click="goLogin">
      <image class="user-avatar" :src="avatarImage"></image>

      <view class="user-main-des">
        <view class="user-name">
          七龙珠
        </view>
      </view>
    </view>

    <v-card class="operate">
      <view class="it-card">
        <view class="it-item" v-for="(item, index) in itData" :key="index" @click="goIt(item)">
          <image class="it-img" :src="item.pic"></image>
          <view class="it-name">
            {{ item.label }}
          </view>
        </view>
      </view>
    </v-card>
    <v-card class="operate">
      <u-form-item labelWidth="120" :label="item.label" :leftIcon="item.pic" prop="userInfo.sex" borderBottom  v-for="(item, index) in myData" :key="index">
        <u--input
          v-model="model.userInfo.re"
          disabled
          disabledColor="#ffffff"
          border="none"
        >
        </u--input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>
    </v-card>
    <v-tabbar :tabbarIndex="3"></v-tabbar>
  </view>
</template>

<script>


export default {
  data() {
    return {
      avatarImage: '/static/images/my_service6.png',
      itData: [
        {
          label: '我报名的活动',
          pic: '/static/images/my_service6.png',
          // gUrl: '/pages/user/userDetail/index'
        },
        {
          label: '我发起的活动',
          pic: '/static/images/my_service7.png',
          gUrl: '/pages/user/userPass/index'
        },
        // {
        //   label: '我的消息',
        //   pic: '/static/images/my_service8.png'
        // },
        // {
        //   label: '我的消息',
        //   pic: '/static/images/my_service10.png'
        // }
      ],
      myData: [
        {
          label: '公告通知',
          pic: '/static/images/avatar_boy.png'
        },
        {
          label: '设置',
          pic: '/static/images/login_jian.png'
        },
        // {
        //   label: '我的消息',
        //   pic: '/static/images/login_top.png'
        // },
        {
          label: '反馈及软件定制联系作者',
          pic: '/static/images/icon-ds.png'
        }
      ]
    };
  },
  methods: {
    goLogin() {
      uni.navigateTo({
        url: `/pages/user/register/index`
      });
    },
    goIt(item) {
      if (item.gUrl) {
        uni.navigateTo({
          url: `${item.gUrl}`
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.user {
  background: #f7f8fa;
  min-height: 100vh;
  padding: $contentPading;
  box-sizing: border-box;
  @include bgCenter($bgtop);
  display: flex;
  flex-direction: column;
  .operate{
    margin-bottom: 20px;
    .input-left-img{
      width: 30px;
      height: 30px;
    }
  }

  .it-card {
    display: flex;
    
    .it-item {
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      .it-name {
        margin-top: 10rpx;
      }
      .it-img {
        width: 100rpx;
        height: 100rpx;
      }
    }
  }
  .user-main {
    height: 200rpx;
    display: flex;
    align-items: center;
    padding: 50rpx 20rpx 20px;
    .user-main-des {
      margin-left: 30rpx;
      .user-name {
        color: white;
        font-size: 44rpx;
      }
    }

    .user-avatar {
      border-radius: 50%;
      width: 120rpx;
      height: 120rpx;
    }
  }
}
</style>